window.onload = function() {
    let nowtime = document.querySelector(".nowtime");
    let news = document.querySelector(".news");
    let ptNode = document.querySelector(".chat_content_list");


    var prevTime;
    var uid;
    let socket = io.connect("http://127.0.0.1:8000");


    function nowDate() {
        var nowdate = new Date();
        var min = nowdate.getMinutes() > 10 ? nowdate.getMinutes() : "0" + nowdate.getMinutes();
        var ss = nowdate.getSeconds() > 10 ? nowdate.getSeconds() : "0" + nowdate.getSeconds();
        var res = min + ":" + ss;
        return res;
    }



    //服务器断开连接后提示
    socket.on("disconnect", function() {
        alert("没有权限登录！你已经被强制下线");
        //显示提示框
        $(".mask").show();
    })



    $(".mask_ok").click(function() {
        //返回到登录页面
        location.href = "/public/login.html";
    })


    $(".mask_cancel").click(function() {
        //隐藏提示框
        $(".mask").hide();
    })





    function renderFriendList(className, id) {
        var chat_friend_list = document.querySelector(className);
        var li = document.createElement("li");
        let colorStyle = "#" + parseInt(Math.random() * 1000000);
        li.className = "friendList";
        li.innerHTML = `
        <span style="background-color:${colorStyle};opacity:0.4;">${id.substring(0,1)}</span>
        <span>
            <ul>
                <li>
                    <p class="friendName">${id}</p>
                    <p class="nowtime">${nowDate()}</p>
                </li>
                <li>
                    <p class="news"></p>
                </li>
            </ul>
        </span>
        `;
        chat_friend_list.appendChild(li);

    }

    //监听到自己的socket.id
    socket.on("uid", function(id) {
        uid = id;
    })


    //监听历史消息
    socket.on("message:history", function(data) {
        data.forEach(function(item) {
            //判断历史消息的用户是自己发的还是别人发的，自己发的在右边，别人发的在左边
            if (item.id === uid) {
                renderSelfList(ptNode, item);
            } else {
                renderOtherList(ptNode, item);
            }
        })
    })



    //keyup事件不会出现enter回车后换行的bug，所以尽量用keyup
    $("#textareaInfo").on("keyup", function(event) {
        if (event.keyCode === 13) {
            let message = $(this).val();
            if (message) {
                socket.emit("message:public", {
                    message: message
                });
                $(this).val("");
                //把滚动条推送到消息的底部
                ptNode.scrollTo(0, ptNode.scrollHeight);
            } else {
                alert("消息不能为空！");
            }
        }
    })



    //监听公共消息
    socket.on("message:everyone", function(data) {
        //消息超过三分钟时，显示当前时间
        if (prevTime) {
            if (new Date().getTime() - prevTime >= 18000) {
                var nowDate = new Date();
                var li = document.createElement("li");
                var p = document.createElement("P");
                var Min = nowDate.getMinutes() < 10 ? "0" + nowDate.getMinutes() : nowDate.getMinutes();
                var sec = nowDate.getSeconds() < 10 ? "0" + nowDate.getSeconds() : nowDate.getSeconds();
                p.innerText = nowDate.getHours() + ":" + Min + ":" + sec;
                p.className = "chat_time";
                li.appendChild(p);
                ptNode.appendChild(li);
            }
            prevTime = new Date().getTime();
        } else {
            prevTime = new Date().getTime();
        }

        if (data.id === uid) {
            renderSelfList(ptNode, data);
        } else {
            renderOtherList(ptNode, data);
        }
    })








    function renderOtherList(parentNode, params) {
        let li = document.createElement("li");
        let user_avatarColor = "#" + parseInt(Math.random() * 1000000);
        li.className = "message_item";
        li.innerHTML = `
            <div class="user_avatar" style="background-color:#380260;opacity:0.2;">${params.id.substring(0,1)}</div>
            <div class="user_info">
                <div class="user_nickname">${params.nickName}</div>
                <div class="user_message">${params.message}</div>
            </div>
        `;
        parentNode.appendChild(li);
    }



    function renderSelfList(parentNode, params) {
        let li = document.createElement("li");
        let user_avatarColor = "#" + parseInt(Math.random() * 1000000);
        li.className = "message_item algin_right";
        li.innerHTML = `
            <div class="user_info">
                <div class="user_nickname">${params.nickName}</div>
                <div class="user_message">${params.message}</div>
            </div>
            <div class="user_avatar" style="background-color:#abcedf;opacity:0.4;">${params.id.substring(0,1)}</div>
        `;
        parentNode.appendChild(li);
    }



    socket.on("user:online", function(socketId) {
        alert(`${socketId}上线了`);
        renderFriendList(".chat_friend_list", socketId);
    });


    socket.on("update:UserList", function(data) {
        // console.log(data);
    })
}